<template>
  <div class="MessageKeybox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="60px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                      v-model="buildingId"
                      :optionlist="qiyelist"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="19" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="getlist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="xunhuan">
        <div class="little wai" v-for="(item,index) in array" :key="index">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div class="over">{{ item.name }}</div>
            </div>
            <div class="count">
              <div>
                <span class="text">是否发送短信:</span>
                <span><el-switch v-model="item.MessageFlag" @change="changestatus(item)"></el-switch></span>
              </div>
              <el-link @click="touser(item)" :underline="false" type="primary">详情</el-link>
            </div>
          </el-card>
        </div>
      </div>
      <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageobj.pageNo"
            @current-change="getlist"
            :total="totalCount"
            :page-size="25"
          >
          </el-pagination>
      </div>
      <el-dialog  :visible.sync="dialogVisible" width="80%" >
        <div>
           <el-form ref="form" label-width="40px">
               <el-row :gutter="20">
                   <el-col :span="5">
                    <el-form-item label="用户">
                      <el-select v-model="customerId" placeholder="" size="small">
                          <el-option v-for="item in userlist" :key="item.value" :label="item.customerName" :value="item.id">
                          </el-option>
                      </el-select>
                    </el-form-item>
                   </el-col>
                   <el-col :span="6">
                    <el-form-item label="">
                      <el-radio-group v-model="state">
                        <el-radio label="">全部</el-radio>
                        <el-radio label="1">开</el-radio>
                        <el-radio label="0">关</el-radio>
                      </el-radio-group>
                    </el-form-item>
                   </el-col>
                   <el-col :span="6">
                    <el-form-item label="">
                      <el-button type="warning" size="small" @click="chonguser" :loading="userisok">重置所有用户</el-button>
                    </el-form-item>
                   </el-col>
                   <el-col :span="7" style="text-align: right;">
                    <el-form-item label="">
                       <el-button size="small"  @click="chongzhiuser">重 置</el-button>
                       <el-button size="small" type="primary" @click="getmessage">查 询</el-button>
                    </el-form-item>
                   </el-col>
               </el-row>
           </el-form>
           <el-divider></el-divider>
           <div class="xunhuan">
            <div class="little nei" v-for="(item,index) in userinlist" :key="index">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <div class="over">{{ item.customerName }}</div>
                </div>
                <div class="count">
                  <div>
                    <span class="text">是否发送短信:</span>
                    <span><el-switch v-model="item.MessageFlag" @change="changeuserstatus(item)"></el-switch></span>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <div class="fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="pageNo"
              @current-change="getmessage"
              :total="userCount"
              :page-size="12"
            >
            </el-pagination>
        </div>
        </div>
     </el-dialog>
    </div>
  </div>
</template>
<script>
import {gettablelistapi} from '@/api/prwpaid/user-manage/OpenAaccount'
import {getsendMessageapi,postchangestatusapi,getmessagelistapi,postusermessageflag,postarrusermessage} from '@/api/prwpaid/configura/MessageKey'
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      array:[],
      buildingId:'',
      qiyelist: [],
      pageobj: {
        pageNo: 1,
        pageSize:25
      },
      totalCount: 0,
      value1: false,
      dialogVisible: false,
      customerId:'',
      userlist: [],
      userinfo: {},
      state: '',
      pageNo: 0,
      userCount: 0,
      userinlist: [],
      userisok:false
    };
  },

  async mounted() {
    const {data:{list}} = await getloginlistapi()
    this.qiyelist = list
    this.getlist()
  },

  methods: {
    async getlist() {
      const { data: { list, totalCount } } = await getsendMessageapi({
        pageNo: this.pageobj.pageNo - 1, pageSize: this.pageobj.pageSize, buildingsId: this.buildingId, state: ''
      })
      this.totalCount = totalCount
      list.forEach(ele => {
        ele['MessageFlag']=ele.sendMessageFlag=='1'?true:false;
      });
      this.array = list
    },
    async changestatus(item) {
      const sendMessageFlag = item.sendMessageFlag=='1' ? '0' : '1'
      await postchangestatusapi({ id: item.id, sendMessageFlag }).then(res => {
        this.$message({
          type:res.code=='200'?'success':'warning',
          message: res.code == '200' ?'操作成功':res.message
        })
        this.getlist()
      })
    },
    // 重置用户
    async chonguser() {
      this.userisok=true
      await postarrusermessage(this.userinfo.id).then(res => {
        this.$message({
          type:res.code=='200'?'success':'warning',
          message: res.code == '200' ?'操作成功':res.message
        })
        this.getmessage()
        this.userisok=false
      })
    },
    // 
    async changeuserstatus(item) {
      const sendMessageFlag = item.sendMessageFlag=='1' ? '0' : '1'
      await postusermessageflag({ customerId: item.id, sendMessageFlag }).then(res => {
        this.$message({
          type:res.code=='200'?'success':'warning',
          message: res.code == '200' ?'操作成功':res.message
        })
        this.getmessage()
      })
    },
    async touser(item) {
      this.userinfo=item
      this.dialogVisible = true
      const {data:{list}} = await gettablelistapi({
        pageNo: 0, pageSize: 500,startDate: '', endDate: '', 
        state:'20',buildingId:item.id,customerType:''
      })
      this.userlist = list
      this.getmessage()
    },
    // 短信开关分页列表
    async getmessage() {
      const { data: { list,totalCount      } } = await getmessagelistapi({
        buildingsId: this.userinfo.id, customerId: this.customerId,state:this.state,pageNo:this.pageNo-1,pageSize:12
      })
      this.userCount=totalCount
      list.forEach(ele => {
        ele['MessageFlag']=ele.sendMessageFlag=='1'?true:false;
      });
      this.userinlist=list
    },
    chongzhiuser() {
      this.customerId = this.state = ''
      this.getmessage()
    },
    chongzhi() {
      this.buildingId = ''
      this.getlist()
    }
  },
};
</script>
<style lang="scss" scoped>
.MessageKeybox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 10px;
    background-color: #fff;
    .xunhuan{
      height: 92%;
      overflow-y: auto;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .little{
        height: 125px;
        margin: 5px;
        .over{
          white-space: nowrap;          /* 不换行 */
          overflow: hidden;             /* 超出部分隐藏 */
          text-overflow: ellipsis;
        }
        .text{
          font-size: 14px;
          color: #606266;
          margin-right: 20px;
        }
        .count{
          display: flex;
          justify-content: space-between;
        }
      }
      .wai{
        width: calc(20% - 10px);
      }
      .nei{
        width: calc(25% - 10px);
      }
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
::v-deep input[aria-hidden="true"] {
    display: none !important;
}

::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
}

</style>